<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    body{background-color: rgb(241,242,243)}
    .el-header{background-color: white}
    #footer_center h3{color: white}
    #footer_center p{margin: 0}
    [v-cloak]{display: none}
  </style>
</head>
<body>
<!--当Vue框架文件加载完成后会自动删除掉所有元素的v-cloak属性-->
<div id="app" v-cloak>
  <el-container>
    <el-header height="80px">
      <div style="width: 1200px;margin: 0 auto">
        <el-row gutter="20">
        <el-col span="6">
          <img src="imgs/icon.png" width="200">
        </el-col>
        <el-col span="10">
          <el-menu mode="horizontal" active-text-color="orange">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">食谱</el-menu-item>
            <el-menu-item index="3">视频</el-menu-item>
            <el-menu-item index="4">资讯</el-menu-item>
          </el-menu>
        </el-col>
        <el-col span="6">
          <el-input style="position: relative;top: 15px" placeholder="请输入搜索的关键字">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col span="2">
          <el-popover
                  placement="top-start"
                  title="欢迎来到烘焙坊!"
                  width="200"
                  trigger="hover">
            <!--设置初始显示的内容-->
            <div slot="reference">
              <i style="font-size: 30px;position: relative;top: 20px" class="el-icon-user"></i>
            </div>
            <!--设置弹出的内容-->
            <el-button type="info">注册</el-button>
            <el-button type="warning">登录</el-button>
          </el-popover>
        </el-col>
      </el-row>
      </div>
    </el-header>
    <el-main style="width: 1200px;margin: 0 auto">

     <el-row gutter="10">
       <el-col span="4">
         <el-card style="height: 500px">
           <el-menu @select="handleSelect" style="border: 0" active-text-color="orange" default-active="1">
              <el-menu-item index="1">个人信息</el-menu-item>
              <el-menu-item index="2">稿件管理</el-menu-item>
           </el-menu>
         </el-card>
       </el-col>
       <el-col span="20">
         <el-card style="height: 500px">
           <el-form label-width="80px" style="width: 500px">
             <el-form-item label="头像">
               <img src="imgs/head.jpg"
                    style="width: 145px;height: 145px;border-radius: 10px;float: left">
               <!--************上传组件开始*************-->
                 <el-upload  style="float: left"
                         action="https://jsonplaceholder.typicode.com/posts/"
                         list-type="picture-card"
                         :on-preview="handlePictureCardPreview"
                         :on-remove="handleRemove">
                   <i class="el-icon-plus"></i>
                 </el-upload>
                 <el-dialog :visible.sync="dialogVisible">
                   <img width="100%" :src="dialogImageUrl" alt="">
                 </el-dialog>
               <!--************上传组件结束*************-->
             </el-form-item>
             <el-form-item label="昵称">
               <el-input placeholder="请输入昵称"></el-input>
             </el-form-item>
             <el-form-item label="用户名">
               <el-input value="tom" disabled></el-input>
             </el-form-item>
             <el-form-item>
               <el-button type="primary">保存修改</el-button>
             </el-form-item>
           </el-form>
         </el-card>

       </el-col>
     </el-row>

    </el-main>
    <el-footer style="background-color: #2f3234;height: 280px;padding: 50px 0">
        <div style="width: 1200px;margin: 0 auto;text-align: center;color: #666">
          <el-row gutter="20">
            <el-col span="8">
              <img src="imgs/icon.png">
              <p>教程灵感就看烘焙坊</p>
              <p>烘焙行业网络社区平台</p>
              <p>全国百城上千个职位等你来</p>
            </el-col>
            <el-col id="footer_center" span="8">
              <el-row gutter="20">
                <el-col span="8">
                  <h3>关于我们</h3>
                  <p>烘焙学院</p><p>烘焙食谱</p>
                  <p>分类信息</p><p>求职招聘</p><p>社区交流</p>
                </el-col>
                <el-col span="8">
                  <h3>服务与支持</h3>
                  <p>练习我们</p><p>广告投放</p>
                  <p>用户协议</p><p>友情链接</p><p>在线反馈</p>
                  <p>我发投稿</p>
                </el-col>
                <el-col span="8">
                  <h3>底部导航</h3>
                  <p>Archiver</p><p>手机版</p><p>小黑屋</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col span="8">
              <p style="font-size: 60px;margin: 0">
                <span style="color: orange">烘焙</span>坊
              </p>
              <p>烘焙行业网络社区平台</p>
            </el-col>
          </el-row>
        </div>
    </el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    methods:{
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleSelect(key,keyPath){
        if (key==1){
          location.href="personal.html";
        }else{
          location.href="content-management.html";
        }
      }
    }
  })
</script>
</html>